<template>
  <body id="login">
  <el-form class="login-form"
           :model="loginForm"
           :rules="rules"
           label-position="left"
           ref="loginForm"
  >
    <h3>欢迎来到论文管理系统</h3>
    <el-row>
      <el-form-item  prop="username">
        <el-input type="text" v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="用户名"
                  @keyup.enter.native="handleLogin('loginForm')"></el-input>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password"  prefix-icon="el-icon-key" show-password placeholder="密码"
                  @keyup.enter.native="handleLogin('loginForm')"></el-input>
      </el-form-item>
    </el-row>
    <el-row>
      <el-col :span="10" >
        <el-form-item prop="code">
          <el-input type="text" v-model="loginForm.code" prefix-icon="el-icon-edit" style="width:100%" placeholder="验证码"
                    @keyup.enter.native="handleLogin('loginForm')"></el-input>
        </el-form-item>
      </el-col>
      <!--  生成验证码    -->
      <div id="v_container"></div>
    </el-row>
    <el-row type="flex" justify="center">
      <el-button type="primary" @click="handleLogin('loginForm')"   class="button_login">登录</el-button>
      <el-button type="primary" @click="$router.push('/register')" class="button_register">注册</el-button>
    </el-row>
  </el-form>

  </body>
</template>

<script>
import { GVerify } from '../../assets/js/validateCode';

export default {
  name: 'Login',
  data () {
    var usernameValidate=(rule,value,callback)=>{
      if(value==='')
        callback(new Error('请输入用户名'))
      callback()
    };
    var passwordValidate=(rule,value,callback)=>{
      if(value==='')
        callback(new Error('请输入密码'))
      callback()
    };
    var codeValidate=(rule,value,callback)=>{
      if(value==='')
        callback(new Error('请输入验证码'))

      callback()
    }
    return {
      loginForm: {
        username: '',
        password: '',
        code: '',
        jwt:'',
      },
      rules: {
        username:[
          {
            validator:usernameValidate,trigger:'blur'
          }
        ],
        password:[
          {
            validator:passwordValidate,trigger:'blur'
          }
        ],
        code:[
          {
            validator:codeValidate,trigger:'blur'
          },
          {
            min:4,max:4,message:'验证码长度不正确',trigger:'blur'
          }
        ],
      },
      validateCode:null,
    }
  },
  methods: {
    //登录
    handleLogin (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.loginForm.password=this.$md5(this.loginForm.password)
          this.$axios.post('/user/login', {//后端接口/user/login
            username: this.loginForm.username,
            password: this.$md5(this.loginForm.password)
          })
            .then(res=>{
              var that = this
              // 获取验证码
              let validateCode = this.loginForm.code
              let validateFlag = this.validateCode.validate(validateCode)
              if (!validateFlag) {
                that.$message.error('验证码错误')
                this.validateCode.refresh()
                return false;
              }
              const jwt=res.data.data.jwt
              const id=res.data.data.id
              const user={}
              user.token=jwt
              user.id=id
              user.username=this.loginForm.username
              user.authority=res.data.data.authority
              /*
                commit(opt,arg)
                opt是方法名，
                jwt是参数
               */
              this.$store.commit('login',user)
              if(user.authority<4) this.$router.push("/index")
              else this.$router.push('/admin')
            }).catch(()=>{
              this.validateCode.refresh()
          })
        } else {
          return false;
        }
      })
    },

  },
  //钩子函数：用于渲染验证码
  mounted(){
    this.validateCode =new GVerify('v_container')
  }
}
</script>

<style scoped>
#login{
  background: url('../../../src/assets/image/loginBackground.jpg') no-repeat center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
html,body{
  margin:0;
  padding:0;
}
.login-form{
  border-radius: 20px;
  margin: 200px auto;
  width:25%;
  border:2px solid lightblue;
  padding:20px;
  background: #ffffff;
}
/deep/ .el-form-item__error {
  color: #e6a23c;
  width: 200px;
  display: flex;
  left:0;
}


#v_container {
  width: auto;
  height: auto;
  display: inline-flex;
  position: relative;
}

.login_remember {
  margin-left: 10px;
  text-align: left;
  float: left;

}

.button_login {
  width: 30%;
  background: #409EFF;
  border: none;
  float: left
}

.button_register {
  width: 30%;
  background: #505458;
  border: none;
  float: right;
}
</style>
